import React, { useEffect, useState } from 'react';
import { DownOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import { setCurrentTheme } from '@/store/modules/ThemeSlice';
const ThemeIndex: React.FC = () => {
  /* 
    主题切换的思路:
      给body设置属性 data-theme 值有两个: 'light/白天'  'dark/黑夜'
      如何获取body并且设置属性???  document.body.setAttribute(属性名,属性值)
  
  */

  const dispatch = useDispatch()

  const {currentTheme} = useSelector(state=>state.themeSlice)

  useEffect(()=>{
    document.body.setAttribute('data-theme',currentTheme)
  },[currentTheme])

  const items: MenuProps['items'] = [
    {
      label: (
        <a href="#" onClick={()=>changeCurrentTheme('light')}>
          白天
        </a>
      ),
      key: '0',
    },
    {
      label: (
        <a href="#" onClick={()=>changeCurrentTheme('dark')}>
          黑夜
        </a>
      ),
      key: '1',
    }
  ];


  const changeCurrentTheme = (theme:string)=>{
    // 修改当前的主题
    dispatch(setCurrentTheme(theme))
  }

  

  return (
    <div style={{float:"left",marginLeft:"20px"}}>
      <Dropdown menu={{ items }} trigger={['click']}>
        <a onClick={(e) => {
          e.preventDefault()
        }}>
          <Space>
            {currentTheme === 'light' ? '白天' : '黑夜'}
            <DownOutlined />
          </Space>
        </a>
      </Dropdown>
    </div>
  )
}

export default ThemeIndex;